<template>
    <div>
        <table border="">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>标题</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(item, index) in goodcart" :key="index">
                    <td> {{ item.id }} </td>
                    <td> {{ item.title }} </td>
                    <td> {{ item.price }} </td>
                    <td> {{ item.number }} </td>
                    <td> <button @click="removeCart(item.id)">移除购物车</button> </td>
                </tr>

                <tr>
                    <td colspan="5">
                        总数量：{{ totalNumber }},总价格:{{ totalPrcie  }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

// 辅助函数生成计算属性
import { mapState,mapGetters,mapMutations,mapActions} from "vuex";

export default {
    name:'goodcart',
    data() {
        return {
            
        }
    },

    //计算属性
    computed: {
        //将 stote 里面的属性 变成本地计算属性
        ...mapState(['goodcart']),
        ...mapGetters(['totalNumber','totalPrcie'])
    },
    methods: {
        ...mapMutations(['removeCart'])
        //...mapActions([])
    },
}
</script>

<style scoped>
</style>